<template>
  <div class="item pd10 br5">
    <div class="flex-row-center-between">
      <el-link type="primary">
        <span class="bold flex1" @click="toPageAgentList">{{ props.data.customerName }}</span>
      </el-link>
      <div class="flex-row-center-between gap10">
        <span class="grey-text">已在线</span>
        <span>{{ props.data.onlineTime }}</span>
      </div>
    </div>

    <div class="mgt10 mgb10 grey-text">
      <span>代理数 {{ props.data.count }} 个</span>
      <span class="mgl10 mgr10">在线数 {{ props.data.countOnline }}</span>
      <span>在线率 {{ props.data.onlineRate }}</span>
    </div>

    <el-progress :show-text="false" :percentage="Number(props.data?.onlineRate.replace('%', '') ?? 0)" color="#1FC16D" />
  </div>
</template>

<script setup lang="ts">
  import type { AgentDistributionItem } from '../config'
  import router from '@/router'

  interface IProps {
    data: AgentDistributionItem
  }
  const props = withDefaults(defineProps<IProps>(), {
    data: () => ({}) as AgentDistributionItem
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const toPageAgentList = () => {
    router.push({
      path: '/agent/list',
      query: {
        customerName: props.data.customerName
      }
    })
  }
</script>

<style scoped lang="less">
  .item {
    border: 1px solid #e4e7ed;
  }
</style>
